import React from 'react';
import { connect } from 'dva';
import { Form, Row, Col, Modal, Tree, Tag } from 'antd';

const { confirm } = Modal;

// 获取整个树
const getTreeNode = treeNodes => {
  let resInfo = {};
  treeNodes.forEach(res => {
    resInfo[res.key] = res;
    if (res.children) {
      const children = getTreeNode(res.children);

      resInfo = Object.assign({}, resInfo, children);
    }
  });
  return resInfo;
};

@Form.create()
@connect(({ report, resource, role, loading }) => ({
  report,
  role,
  resource,
  loading: loading.models.report,
}))
class AllotReport2Role extends React.Component {
  static defaultProps = {
    values: {
      appId: 0,
      type: 0,
    },
    isEdit: false,
    handleUpdate: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      expandedKeys: [],
      selectedKeys: [],
      autoExpandParent: false,
      checkedKeys: [],
    };
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const {
      dispatch,
      values: { id: roleId },
    } = this.props;

    dispatch({
      type: 'report/fetchReportTree',
    });
    dispatch({
      type: 'role/fetchRoleReports',
      payload: {
        roleId,
      },
      callback: data => {
        this.setState({
          checkedKeys: data,
        });
      },
    });
  }

  okHandle = () => {
    const {
      values,
      handleUpdate,
      report: { reportTree },
    } = this.props;
    const { checkedKeys } = this.state;

    // 获取资源树信息
    const resInfo = getTreeNode(reportTree);
    // 获取权限类型信息
    const contentInfo = {};
    const selectedKeys = [];
    checkedKeys.forEach(key => {
      const node = resInfo[key];
      if (node.leaf) {
        contentInfo[key] = node.title;
        selectedKeys.push(key);
      }
    });

    confirm({
      title: '角色赋权报表如下：',
      content: (
        <div>
          {Object.keys(contentInfo).map(key => (
            <Tag style={{ margin: 5 }}>{contentInfo[key]}</Tag>
          ))}
        </div>
      ),
      onOk() {
        handleUpdate({
          roleId: values.id,
          reportIds: selectedKeys,
        });
      },
    });
  };

  // 节点选中
  onCheck = checkedKeys => {
    this.setState({ checkedKeys });
  };

  // 树展开
  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  render() {
    const {
      modalVisible,
      handleModalVisible,
      values,
      report: { reportTree },
    } = this.props;
    const { expandedKeys, autoExpandParent, checkedKeys, selectedKeys } = this.state;

    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={540}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title="分配报表权限"
        visible={modalVisible}
        onCancel={() => handleModalVisible(false, false, values)}
        onOk={this.okHandle}
      >
        <div style={{ height: '500px', overflow: 'scroll' }}>
          <Row gutter={8}>
            <Col span={16}>
              <Tree
                checkable
                expandedKeys={expandedKeys}
                checkedKeys={checkedKeys}
                selectedKeys={selectedKeys}
                autoExpandParent={autoExpandParent}
                onCheck={this.onCheck}
                onExpand={this.onExpand}
                treeData={reportTree}
              />
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}

export default AllotReport2Role;
